<template>
  <div class="page-container">
    <!--工具栏-->
    <div class="toolbar">
      <el-form :inline="true" :model="filters" :size="size">
        <el-row class="search-input">
          <el-form-item label=" 商家名称：">
            <el-input v-model="filters.merchantName" placeholder="商家名称"></el-input>
          </el-form-item>
          <el-form-item label=" 发票抬头：">
            <el-input v-model="filters.invoiceTitle" placeholder=" 发票抬头"></el-input>
          </el-form-item>
          <el-form-item label=" 纳税人识别号：">
            <el-input v-model="filters.taxpayerNumber" placeholder=" 纳税人识别号"></el-input>
          </el-form-item>
        </el-row>
        <el-row class="search-button">
          <el-form-item>
            <kt-button
              icon="fa fa-search"
              :label="$t('action.search')"
              type="primary"
              @click="findPage(null)"
            />
          </el-form-item>
          <el-form-item>
            <kt-button
              icon="fa fa-refresh"
              :label="$t('action.reset')"
              type="primary"
              @click="resetForm('filters')"
            />
          </el-form-item>
        </el-row>
        <el-form-item class="w100 t_r">
          <el-button-group>
            <el-tooltip content="刷新" placement="top">
              <el-button icon="fa fa-refresh" @click="findPage(null)"></el-button>
            </el-tooltip>
            <el-tooltip content="列显示" placement="top">
              <el-button icon="fa fa-filter" @click="displayFilterColumnsDialog"></el-button>
            </el-tooltip>
            <el-tooltip content="导出" placement="top">
              <el-button icon="fa fa-file-excel-o" @click="downloadExcel"></el-button>
            </el-tooltip>
          </el-button-group>
        </el-form-item>
      </el-form>
    </div>
    <cy-table
      :operationWidth="300"
      :height="350"
      :data="pageResult"
      :columns="filterColumns"
      :showBatchDelete="false"
      :showDeleteOperation="false"
      :showSelection="false"
      :showDetailOperation="false"
      :showEditOperation="false"
      :showOperation="false"
      @findPage="findPage"
      ref="CyTable"
    ></cy-table>
    <!--分销员弹框-->
    <el-dialog
      title="添加商家"
      width="30%"
      :visible.sync="editDialogVisible"
      :close-on-click-modal="false"
      @closed="handleClose"
    >
      <el-form
        :model="dataForm"
        label-width="140px"
        :rules="dataFormRules"
        ref="dataForm"
        :size="size"
      >
        <el-row class="searchDialog-input">
          <el-form-item label="手机号码：" prop="mobile">
            <!-- <el-input v-model="dataForm.mobile" auto-complete="off" :disabled="false" placeholder="请输入手机号码" ></el-input> -->
            <el-select
              style="width: 456px;"
              v-model="dataForm.mobile"
              clearable
              filterable
              remote
              reserve-keyword
              placeholder="请输入会员手机号码"
              :remote-method="remoteMethod"
              @change="choseCustomer"
            >
              <el-option
                v-for="item in options"
                :key="item.id"
                :label="item.mobile"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="昵称：" prop="nickname" class="serarch-inner">
            <el-input
              v-model="dataForm.nickname"
              auto-complete="off"
              :disabled="false"
              placeholder="请输入"
            ></el-input>
          </el-form-item>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer" style="text-align:center">
        <el-button :size="size" @click.native="editDialogVisible = false">{{$t('action.cancel')}}</el-button>
        <el-button
          :size="size"
          type="primary"
          @click.native="submitForm"
          :loading="editLoading"
        >{{$t('action.submit')}}</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import KtButton from "@/views/Core/KtButton";
import CyTable from "@/views/Core/JicTable";
export default {
  components: {
    KtButton,
    CyTable
  },
  data() {
    return {
      options: [],
      editDialogVisible: false,
      editLoading: false,
      size: "mini",
      columns: [
        { prop: "merchantName", label: "商家名称", minWidth: 120 },
        { prop: "balanceAmount", label: "账户余额", minWidth: 120 },
        { prop: "cashAmount", label: "可提现金额", minWidth: 120 },
        { prop: "freezeAmount", label: "冻结金额", minWidth: 120 },
        { prop: "accountType", label: "账户类型", minWidth: 120 },
        { prop: "bankName", label: "开户行名称", minWidth: 120 },
        { prop: "bankAccount", label: "开户行账号", minWidth: 120 },
        { prop: "bankCard", label: "银行卡账号", minWidth: 120 },
        { prop: "bankOutlet", label: "开户行网点", minWidth: 120 },
        { prop: "invoiceTitle", label: "发票抬头", minWidth: 120 },
        { prop: "taxpayerNumber", label: "纳税人识别号", minWidth: 120 },
        { prop: "createTime", label: "创建时间", minWidth: 120 }
      ],
      filterColumns: [],
      pageRequest: { pageNum: 1, pageSize: 10 },
      pageResult: {},
      filters: {
        name: "",
        res: {
          total: 3,
          code: "0000",
          rows: [
            {
              merchantName: "天猫",
              balanceAmount: 800,
              cashAmount: 700,
              freezeAmount: 100,
              accountType: "对公账户",
              bankName: "中国银行",
              bankAccount: "1223457653354",
              bankCard: "1235534556666",
              bankOutlet: "中山路",
              invoiceTitle: "好又多",
              taxpayerNumber: "1223i23323920",
              createTime: "2020-06-08"
            }
          ]
        }
      },
      dataForm: {},
      dataFormRules: {}
    };
  },
  methods: {
    // 获取分页数据
    findPage: function(data) {
      this.$refs.CyTable.findPageStaticState(this.filters);
    },
    //查询后台member表信息
    remoteMethod: function(query) {
      if (query !== "" && query.length > 0) {
        //查询后台客户信息
        var search = {};
        search.mobile = query;
        var this_ = this;
        this.utils.request.queryMemberList(search, function(res) {
          this_.options = res.data.rows;
        });
      } else {
        this.options = [];
      }
    },
    //模糊匹配
    choseCustomer: function(selVal) {
      var temp = this.options;
      var this_ = this;
      if (selVal == "" || selVal == null) {
        this_.dataForm.id = "";
        this_.dataForm.nickname = "";
        this_.dataForm.mobile = "";
      } else {
        $.each(temp, function(key, val) {
          if (val.id == selVal) {
            this_.dataForm.id = val.id;
            this_.dataForm.nickname = val.nickname;
            this_.dataForm.mobile = val.mobile;
            this_.dataForm = Object.assign({}, this_.dataForm);
            return;
          }
        });
      }
    },
    //设置分销员
    setDis() {
      this.editDialogVisible = true;
    },
    //提交按钮
    submitForm() {
      this.$refs.dataForm.validate(valid => {
        if (valid) {
          this.$confirm("确认提交吗？", "提示", {}).then(() => {
            let params = Object.assign({}, this.dataForm);
            var this_ = this;
            this.utils.request.editDistributorInfo(params, function(res) {
              if (res.code == "0000") {
                this_.$message({ message: "操作成功", type: "success" });

                this_.editDialogVisible = false;

                this_.findPage(null);
              } else {
                this_.$message({
                  message: "操作失败, " + res.msg,
                  type: "error"
                });
              }
            });
          });
        }
      });
    },
    resetForm(formName) {
      if (this.$refs[formName] != undefined) {
        this.$refs[formName].resetFields();
        this.findPage(null);
      }
    },
    // 列表下载
    downloadExcel() {
      this.$confirm("确定下载列表文件?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          let filename = "销售订单报表";
          this.$refs.CyTable.exportData(
            this.filters,
            this.filterColumns,
            filename
          );
        })
        .catch(() => {});
    },
    statusFormat: function(row, column, cellValue, index) {
      if (cellValue == 10) {
        return "已完成";
      } else if (cellValue == 1) {
        return "待支付";
      } else if (cellValue == 2) {
        return "已支付";
      } else if (cellValue == 3) {
        return "待发货";
      } else if (cellValue == 4) {
        return "已发货";
      } else if (cellValue == 5) {
        return "确认收货";
      } else if (cellValue == 6) {
        return "待评价";
      } else if (cellValue == 7) {
        return "已关闭";
      } else if (cellValue == 8) {
        return "付款处理中";
      } else if (cellValue == 9) {
        return "已退款";
      }
    },
    payStatusFormat: function(row, column, cellValue, index) {
      if (cellValue == 1) {
        return "待支付";
      } else if (cellValue == 2) {
        return "已支付";
      } else if (cellValue == 3) {
        return "已关闭";
      } else if (cellValue == 4) {
        return "部分关闭";
      }
    },
    payTypeFormat: function(row, column, cellValue, index) {
      if (cellValue == 1) {
        return "网上支付";
      } else if (cellValue == 2) {
        return "线下支付";
      }
    },
    handleClose() {
      this.$refs.dataForm.resetFields();
    },
    // 处理表格列过滤显示
    displayFilterColumnsDialog: function() {
      this.$refs.tableColumnFilterDialog.setDialogVisible(true);
    },
    // 处理表格列过滤显示
    handleFilterColumns: function(data) {
      this.filterColumns = data.filterColumns;
      this.$refs.tableColumnFilterDialog.setDialogVisible(false);
    },
    // 处理表格列过滤显示
    initColumns: function() {
      var temp = [];

      $.each(this.columns, function(key, val) {
        temp.push(val);
      });
      this.filterColumns = temp;
    }
  },
  mounted() {
    this.initColumns();
    this.findPage();
    // this.memberTypeLists();
  }
};
</script>

<style scoped lang="scss">
</style>
